<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Card, Swipe, SwipeItem, Grid, GridItem } from 'vant'
import { loadBannersAPI } from '../api/banners'
import { useCategories } from '../hooks/use-categories'
import { useProducts } from '../hooks/use-products';
import { dalImg } from '../utils/tools'

const router = useRouter()

const { products, loadDataFromServer } = useProducts()
loadDataFromServer()
// const products = ref([])
// loadProductsAPI().then((res) => {
//     products.value = res.data
// })

// 轮播图
const banners = ref([]);
loadBannersAPI().then((res) => (banners.value = res.data));

// 商品分类
const { categories } = useCategories()
// const categories = ref([]);
// loadCategoriesAPI().then((res) => (categories.value = res.data));

const toDetail = (id) => {
    router.push({ name: 'Detail', query: { id } })
}
</script>

<template>
    <div class="home">
        <swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <swipe-item v-for="item in banners" :key="item.id">
                <img :src="dalImg(item.coverImage)" :alt="item.name" />
            </swipe-item>
        </swipe>

        <grid :column-num="4">
            <grid-item v-for="item in categories" :key="item.id" :icon="dalImg(item.coverImage)" :text="item.name"
                :to="{ name: 'List', query: { tid: item.id } }" />
        </grid>

        <card v-for="item in products" :num="item.amount" :price="item.price.toFixed(2)" :title="item.name"
            :thumb="dalImg(item.coverImage)" @click-thumb="toDetail(item.id)" />
    </div>
</template>

<style scoped>
/* .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
} */
</style>